<template>
    <!--商品列表区域-->
    <div class="goodscontant">
        <div class="zero" style="width: 100%;display: flex;justify-content: center;margin-top: 10px;color: red"
             v-if="!goodslist.length">
            <h3>暂时还没有商品</h3>
        </div>
        <div class="goodslist">
            <div class="mui-card" v-for="(item,i) in goodslist">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <mt-switch v-model="goodsswitch[item.id]"
                                   @change="switchchange"></mt-switch>
                        <img :src="item.thumb_path">
                        <div class="info">
                            <h1>{{item.title}}</h1>

                            <numbox style="height: 25px;"
                                    v-model="goodsnums[item.id]"
                                    :readonly="true"></numbox>

                            <p style="display: block;margin-top: 5px;display: flex;align-items: center">
                                <span class="price">￥{{item.sell_price}}</span>
                                <mt-button style="margin-left: 15px;height: 20px;font-size: 15px"
                                           @click="removegoods(item.id)"
                                           type="danger">删除
                                </mt-button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--商品结算区域-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>总计:{{$store.getters.getgoodsCountandAmout.sumcount}} 件</p>
                    <p class="sumamoutn">总价：{{$store.getters.getgoodsCountandAmout.sumamount}}元</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import numbox from '../subcomponents/numbox.vue'
    import proxy from '../../lib/proxy'

    export default {
        components: {
            numbox
        },
        data() {
            return {
                // 列表根据store里的id获取的产品信息
                goodslist: [],
                // 这里真的太巧妙，利用数组的可添加属性和绑定的特性，解决了对象无法进行添加属性双向数据绑定的问题
                // 再次解决这个问题，使用自己的监听函数解决,这样也能完成数据变动监听,完美解决问题
                goodsnums: {},
                goodsswitch: {}
            }
        },
        watch: {
            goodsnums: {
                handler(data) {
                    this.$store.commit('changecarnum', this.goodsnums)
                },
                deep: true
            }
        },
        computed: {},
        methods: {
            pushstorenums() {
                this.$store.commit('changecarnum', this.goodsnums)
            },
            // 获取商品列表信息同时获得store里产品信息的数量信息，根据id进行数量绑定
            getgoodslist() {
                let idArr = []
                let goodsnumslist = {}//用于双向绑定的数据
                this.$store.state.car.forEach(item => {
                    idArr.push(item.id)
                    goodsnumslist[item.id] = item.buynum //从拿到的数据里剥离双向绑定的数据
                    this.goodsswitch[item.id] = item.selected
                })
                // 对goodsnums里的数据进行手动监听
                // 遍历获取到的数据，绑定set和get，然后通过回调函数调用改变数据函数
                // 然后传入回调函数
                Object.keys(goodsnumslist).forEach(key => proxy(this.goodsnums, goodsnumslist, key, this.pushstorenums))


                if (idArr.length <= 0) {
                    return;
                }
                this.$http.get('api/goods/getshopcarlist/' + idArr.join(',')).then(res => {
                    if (res.body.status == 0) {
                        this.goodslist = res.body.message
                    }
                })
            },
            // 删除本身的产品的数据，通知store删除loca上的数据和car上的数据（其实store和loca是绑定的）
            removegoods(id) {
                this.goodslist.some((res, i) => {
                    if (res.id === id) {
                        this.goodslist.splice(i, 1)
                    }
                })
                this.$store.commit('removelist', id)
            },
            // 根据双向绑定的数据通过store更改car上的数据
            switchchange(id) {
                this.$store.commit('switchchange', this.goodsswitch)
            }
        },
        created() {
            this.getgoodslist()
        },
        mounted() {

        }
    }
</script>

<style scoped lang="scss">
    .goodscontant {
        .mui-card-content-inner {
            display: flex;
            align-items: center;

            .price {
                color: red;
            }

            .info {
                margin-left: 15px;
            }
        }

        .goodslist {
            img {
                min-width: 60px;
                height: 60px;
                margin-left: 10px;
            }

            h1 {
                font-size: 14px;
            }
        }

        .sumamoutn {
            color: red;
            margin-left: 20px;
        }
    }
</style>